<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<div id="p1"></div>
<div id="p2"></div>
<div id="p3"></div>

<script>
  let data ={
    name : '阿南',
    age : 18,
    children : {
      name : '小南',
      age : 6
    }
  }

function viSave() {
  p1.innerText = data.name
  p2.innerText = data.age
  p3.innerText = data.children.name
}
viSave()

function daModule(state) {
  Object.keys(state).forEach(key=>{
if(typeof state[key]=== 'object') {
return daModule(state[key])
}
// console.log(state[key]);
let value = state[key]

Object.defineProperty(state,key,{
  get() {
return value
  },
  set(val) {
value = val
viSave()
  }
})
  })
}

daModule(data)
</script>
</body>
</html>
